<template>
  <a-space direction="horizontal">
    <a-input size="large" v-model:value="searchTitle" placeholder="搜索标题"/>
    <a-input-search
        v-model:value="searchContent"
        placeholder="搜索内容"
        enter-button="Search"
        size="large"
        @search="onSearch"
    />
  </a-space>
  <a-divider>目标规划列表</a-divider>
  <a-table size="large" :columns="columns" :data-source="data" :pagination="paginationConfig" :loading="deleteLoading">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined/>
          目标规划
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'createTime'">
        <span>
          <a-tag
              :key="record.createTime"
              color="geekblue"
          >
            {{ record.createTime }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'endTime'">
        <span>
          <a-tag
              :key="record.endTime"
              color="geekblue"
          >
            {{ record.endTime }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a class="ant-dropdown-link" @click="toEditTarget(record)">
            Edit
            <down-outlined/>
          </a>
          <a-divider type="vertical"/>
          <a class="ant-dropdown-link" @click="showDrawer(record)">
            ShowDetail
            <down-outlined/>
          </a>
          <a-divider type="vertical"/>
          <a style="color: red" @click="deleteTarget(record.id)">
            Delete</a>
        </span>
      </template>
    </template>
  </a-table>
  <a-float-button
      tooltip="新建目标规划"
      type="primary"
      :style="{
      left: '15vw',
      bottom:'13vh'
    }"
      @click="toCreateTargetPage"
  >
    <template #icon>
      <plus-outlined/>
    </template>
  </a-float-button>
  <a-drawer title="查看规划内容" size="large" :open="open" @close="closeDrawer">
    <v-md-editor v-model="detailTargetContent" mode="preview"></v-md-editor>
  </a-drawer>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {PlusOutlined} from "@ant-design/icons-vue";
import myAxios from "../axios.js";
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";
const detailTargetContent = ref('## 你好edit')
const open =ref(false);
const showDrawer = (record) => {
  detailTargetContent.value = record.content
  open.value = true
}
const closeDrawer =() => {
  open.value = false;
}
const toEditTarget = (record) => {
  router.push({
    path:'/targetEditPage',
    query: {
      id : record.id,
    }
  })
}
const searchTitle = ref('');
const searchContent = ref('');
const deleteLoading = ref(false);
const deleteTarget = (id) => {
  message.warn('删除中');
  deleteLoading.value = true;
  myAxios.delete(`/target/delete?id=${id===undefined?'':id}`)
  setTimeout(()=> {
    deleteLoading.value = false;
    getTargetList(searchTitle.value,searchContent.value);

  },2000)
}
const onSearch = () => {
  getTargetList(searchTitle.value, searchContent.value);
}
const getTargetList = (searchTitle, searchContent) => {
  myAxios.get(`/target/list?searchTitle=${searchTitle === undefined ? '' : searchTitle}&searchContent=${searchContent === undefined ? '' : searchContent}`).then(
      res => {
        if (res.code === 0) {
          data.value = res.data;
        } else {
          message.error('获取目标规划列表失败')
        }
      }
  ).catch(
      error => {
        console.log('目标规划列表请求出错了', error);
      }
  )
}
onMounted(() => {
  getTargetList();
})
const router = useRouter();
const toCreateTargetPage = () => {
  router.push('/targetCreatePage');
}
const paginationConfig = ref({
  pageSize: 8,
  showTotal: (total) => {
    return `总共：${total}`
  }
})
const columns = [{
  title: '目标规划',
  dataIndex: 'title',
  key: 'title',
}, {
  title: '创建时间',
  dataIndex: 'createTime',
  key: 'createTime',
}, {
  title: '结束日期',
  dataIndex: 'endTime',
  key: 'endTime',
}, {
  title: 'Action',
  key: 'action',
}];
const data = ref([]);
</script>

<style scoped>

</style>